<template>
  <view class="main">
    <view class="common">
      <view
        class="set-item dispaly-just-between"
        v-for="(item, index) in settingList"
        :key="index"
      >
        <view class="name">{{ item.name }}</view>
        <view
          class="sel-w dispaly-align-center"
          @click="clickType(item, index)"
        >
          <view class="sel-n" v-if="current == index"></view>
        </view>
      </view>
    </view>
    <view class="time-box dispaly-just-between common">
      <view class="title">推广时长</view>
      <view class="item-box">
        <view
          :class="{ ac: timeCurrent == index }"
          class="time-item dispaly-align-center"
          v-for="(item, index) in ruleList"
          :key="index"
          @click="clickTime(item, index)"
          >{{ item.dictLabel }}天</view
        >
      </view>
    </view>
    <view class="common price-box">
      <view class="price-item dispaly-just-between">
        <view class="price-title">价格</view>
        <view v-if="ruleList.length" class="price-number" style="color: #0753fc"
          >￥{{ Number(ruleList[timeCurrent].dictValue).toFixed(2) }}
        </view>
      </view>
      <view class="price-item dispaly-just-between">
        <view class="price-title">原价</view>
        <view
          v-if="ruleList.length"
          class="price-number"
          style="color: #999999; text-decoration: line-through"
        >
          ￥{{ Number(ruleList[timeCurrent].remark).toFixed(2) }}</view
        >
      </view>
      <view class="price-item dispaly-just-between">
        <view class="price-title">优惠</view>
        <view v-if="ruleList.length" class="price-number" style="color: #f5891d"
          >￥{{
            Number(
              Number(ruleList[timeCurrent].remark) -
                Number(ruleList[timeCurrent].dictValue)
            ).toFixed(2)
          }}</view
        >
      </view>
    </view>
  </view>
  <view class="btns">
    <Button
      @clickButton="submit"
      :loading="loading"
      loading-text="支付中"
      :text="priceText"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  getWriteFillList,
  overhead,
  h5Pay,
  miniPay,
  getCircleDesk,
} from "@/api/apiList";

const formData = ref({
  id: "",
  type: "1",
  ruleId: "",
});

const isOverhead = ref("");

onLoad((option) => {
  formData.value.id = option.id;
  getRules();
  if (option.cid) {
    // 获取圈子详情
    getCircleDetail(option.cid);
  }
});

const getCircleDetail = async (cid) => {
  const res = await getCircleDesk({ id: cid });
  if (res.code != 200) {
    return uni.showToast({
      title: "获取圈子详情失败",
      icon: "none",
    });
  }

  isOverhead.value = res.data.isOverhead;
};

const ruleList = ref([]);
const getRules = async (data = "/overhead_square") => {
  const res = await getWriteFillList(data);
  if (res.code == 200) {
    ruleList.value = res.data;
    priceText.value = `立即支付￥${ruleList.value[0].dictValue}`;
    formData.value.ruleId = ruleList.value[0].dictCode;
  }
};

const timeCurrent = ref(0);
const priceText = ref("");
const clickTime = (item, index) => {
  priceText.value = `立即支付￥${item.dictValue}`;
  timeCurrent.value = index;
  formData.value.ruleId = item.dictCode;
};

const settingList = ref([
  { name: "广场置顶", type: 1 },
  { name: "首页置顶", type: 2 },
]);

const clickType = (item, index) => {
  console.log(item);
  item.type == 1 ? getRules("/overhead_square") : getRules("/overhead_index");
  current.value = index;
  formData.value.type = item.type;
};

const current = ref(0);

const loading = ref(false);
const submit = async () => {
  if (isOverhead.value != 1) {
    loading.value = false;
    return uni.showToast({
      title: "圈子未开启置顶收费规则",
      icon: "none",
    });
  }

  loading.value = true;
  // const res = await h5Pay(newObject);
  // const res = await overhead(formData.value);
  const parms = {
    totalAmount: 0.01,
    subject: current.value == 0 ? "广场置顶" : "首页置顶",
  };

  // 1供需广场顶置 2首页顶置
  // 微信支付
  const ua = navigator.userAgent.toLowerCase();

  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    uni.setStorageSync("topData", formData.value);
    let flag = current.value == 0 ? 7 : 8;
    uni.setStorageSync("palyType", flag + "");
    // 跳转页面
    uni.navigateTo({
      url: "/pages/forSale/pages/weixinPay",
    });
  } else {
    loading.value = false;
    return uni.showToast({
      title: "请前往微信公众号号进行支付",
      icon: "none",
    });

    const result = await miniPay(parms);

    if (result.code == 200) {
      // console.log(res.msg);
      // loading.value = false;
      // window.location.href = res.msg;
      uni.setStorageSync("resFrom", result.msg);
      uni.navigateTo({
        url: "/pages/forSale/pages/Alipay?id=" + formData.value.id,
      });
    }

    return;

    const res = await miniPay(parms);
    if (res.code == 200) {
      // console.log(res.msg);
      // loading.value = false;
      // window.location.href = res.msg;
      uni.setStorageSync("resFrom", res.msg);
      uni.navigateTo({
        url: "/pages/forSale/pages/Alipay?id=" + formData.value.id,
      });
      // uni.showToast({
      //   title: "支付成功",
      //   icon: "none",
      // });
      // setTimeout(() => {
      //   uni.navigateBack();
      // }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.common {
  padding: 40rpx;
  box-sizing: border-box;
  border: 1px solid #0753fd;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}

.ac {
  background-color: #0753fd !important;
  color: #fff !important;
}

.price-box {
  .price-item:last-child {
    margin-bottom: 0;
  }

  .price-item {
    margin-bottom: 36rpx;

    .price-title {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      color: #111111;
    }

    .price-number {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      font-weight: normal;
      line-height: 14px;
    }
  }
}

.time-box {
  .title {
    font-family: PingFang SC Medium;
    font-size: 32rpx;
    color: #111111;
  }

  .item-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .time-item {
      border: 1px solid #0753fd;
      border-radius: 8rpx;
      padding: 10rpx 20rpx;
      margin: 15rpx;
    }
  }
}

.set-item:last-child {
  margin-bottom: 0;
}

.set-item:first-child {
  border-bottom: 1rpx solid #eee;
  padding-bottom: 40rpx;
}

.set-item {
  margin-bottom: 52rpx;

  .name {
    font-family: PingFang SC Medium;
    font-size: 32rpx;
    color: #111111;
  }

  .sel-w {
    width: 34rpx;
    height: 34rpx;
    box-sizing: border-box;
    border: 1rpx solid #999999;
    border-radius: 50%;

    .sel-n {
      width: 26rpx;
      height: 26rpx;
      background-color: #0753fd;
      border-radius: 50%;
    }
  }
}

.main {
  padding: 40rpx 50rpx;
}

.btns {
  padding: 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}
</style>
